<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>产品列表页 - 我爱模板网 www.5imoban.net</title>
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="css/base.css" type="text/css" rel="stylesheet" />
<link href="css/main.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function loadAll(){
    $.ajax({
        url: "/ProductManagement/select",
        data: {},
        type: "post",
        datatype: "json",
        success:function(result){
	       	 var products = eval("("+result+")");
	       	 var show='';
	       	 for(var i = 0;i<products.length;i++){
	       		 show=show+"<li onclick=\"window.location.href='detail.html?id="+products[i].id+"'\"><a href=\"#\"><img src=\"img/"+products[i].image+"\" class=\"img-responsive\"><p>"+products[i].name+"</p><span>价格 ￥"+products[i].price+" RMB</span></a></li>"
	         }
	       	 $("ul.prolist").empty();
	       	 $("ul.prolist").append(show);
        }
    });
}
function selectrealtime(){
    $.ajax({
        url: "/ProductManagement/select",
        data: {name:search.name.value,
        	description:search.description.value,
        	pricelow:search.pricelow.value,
        	pricehigh:search.pricehigh.value,
        	quantitylow:search.quantitylow.value,
        	quantityhigh:search.quantityhigh.value},
        type: "post",
        datatype: "json",
        success:function(result){
	       	 var products = eval("("+result+")");
	       	 var show='';
	       	 for(var i = 0;i<products.length;i++){
	       		 show=show+"<li onclick=\"window.location.href='detail.html?id="+products[i].id+"'\"><a href=\"#\"><img src=\"img/"+products[i].image+"\" class=\"img-responsive\"><p>"+products[i].name+"</p><span>价格 ￥"+products[i].price+" RMB</span></a></li>"
	         }
	       	 $("ul.prolist").empty();
	       	 $("ul.prolist").append(show);
        }
    });
}
function selectauto(){
	$("section.fl.search form input").keyup(function(){
		selectrealtime();
	});
}
</script>
</head>
<body onload="loadAll(),selectauto()">
<!--header-->
<header>
	<section>品牌官网</section>
</header>
<!--/header-->
<!--nav-->
<nav id="nav-index" class="clearfix">
	<section class="container">
        <a href="#" class="fl home">HOME</a>
        <a href="javascript:;" class="fr button" data-num="0"><i class="glyphicon glyphicon-align-justify"></i></a>
        <ul class="nav-list">
            <li><a href="#">双肩包</a></li>
            <li><a href="#">单肩包</a></li>
            <li><a href="#">真皮女包</a></li>
            <li><a href="#">coach女包</a></li>
            <li><a href="#">手提包</a></li>
        </ul>
    </section>
</nav>
<!--/nav-->
<!--main-->
<section id="main" class="container mt10">
	<section class="row">
    	<section class="col-sm-3 sidebar clearfix">
        	<dl class="sidebar-cp">
            	<dt class="clearfix">
                	<span class="fl">产品类别</span>
                    <i class="fr glyphicon glyphicon-list"></i>
                </dt>
                <section>
                    <dd><a href="#">铂金</a></dd>
                    <dd><a href="#">铂金系列(25CM)</a></dd>
                    <dd><a href="#">铂金系列(30CM)</a></dd>
                    <dd><a href="#">铂金系列(35CM)</a></dd>
                    <dd><a href="#">凯莉</a></dd>
                    <dd><a href="#">凯莉系列(20CM)</a></dd>
                    <dd><a href="#">凯莉系列(28CM)</a></dd>
                    <dd><a href="#">凯莉系列(32CM)</a></dd>
                    <dd><a href="#">林迪</a></dd>
                    <dd><a href="#">林迪系列(25CM)</a></dd>
                    <dd><a href="#">林迪系列(28CM)</a></dd>
                    <dd><a href="#">林迪</a></dd>
                </section>
            </dl>
        	<dl class="sidebar-pl">
            	<dt class="clearfix">
                	<span class="fl">皮料类别</span>
                    <i class="fr glyphicon glyphicon-list"></i>
                </dt>
                <section>
                    <dd class="d1"><a href="#">头层牛皮</a></dd>
                    <dd class="d2"><a href="#">鳄鱼皮</a></dd>
                    <dd class="d3"><a href="#">日本植鞣革</a></dd>
                    <dd class="d4"><a href="#">意大利植鞣革</a></dd>
                    <dd class="d5"><a href="#">法国原版皮</a></dd>
                    <dd class="d6"><a href="#">意大利疯马皮</a></dd>
                </section>
            </dl>
        	<dl class="sidebar-color">
            	<dt class="clearfix">
                	<span class="fl">皮料类别</span>
                    <i class="fr glyphicon glyphicon-list"></i>
                </dt>
                <section class="clearfix">
                	<dd class="color1"><span></span></dd>
                	<dd class="color2"><span></span></dd>
                	<dd class="color3"><span></span></dd>
                	<dd class="color4"><span></span></dd>
                	<dd class="color5"><span></span></dd>
                	<dd class="color6"><span></span></dd>
                	<dd class="color7"><span></span></dd>
                	<dd class="color8"><span></span></dd>
                	<dd class="color9"><span></span></dd>
                	<dd class="color10"><span></span></dd>
                	<dd class="color11"><span></span></dd>
                	<dd class="color12"><span></span></dd>
                </section>
            </dl>
        </section>
    	<section class="col-sm-9">
        	<section class="clearfix mt10">
            	<ul class="pagelist fl clearfix hidden-xs">
                	<li><span>1</span></li>
                	<li><a href="#">2</a></li>
                	<li><a href="#">3</a></li>
                	<li><a href="#">4</a></li>
                	<li><a href="#">5</a></li>
                	<li class="num2"><a href="#">100</a></li>
                	<li class="last"><a href="#">最有一页</a></li>
                </ul>
                <section class="fl search">
                	<form action="" method="get" name="search">
                    	名称：<input type="text" name="name" >
                    	描述：<input type="text" name="description" >
                    	价格：<input type="text" name="pricelow" onkeyup="value=value.replace(/[^(\d+)(\.\d+)?$]{1}/g,'')" >
                    	~<input type="text" name="pricehigh" onkeyup="value=value.replace(/[^(\d+)(\.\d+)?$]{1}/g,'')" >
                    	数量：<input type="text" name="quantitylow" onkeyup="value=value.replace(/[^(\d+)$]{1}/g,'')" >
                    	~<input type="text" name="quantityhigh" onkeyup="value=value.replace(/[^(\d+)$]{1}/g,'')" >
                    	<input type="button" style="width:22px;height:22px;border-width:0;border-style:solid;vertical-align:middle;background:url(images/search_ico.png) no-repeat center;" onclick="selectrealtime();">
                    </form>
                </section>
            </section>
            <ul class="prolist">
            		
            </ul>
        </section>
    </section>
    <section class="mt15">
        <a href="#"><img src="images/ad.png" class="img-responsive"></a>
    </section>
    <ul class="prolist-2 clearfix mt15">
        <li>
            <a href="#">
                <img src="images/img17.png" class="img-responsive">
                <p>
                    korralaa铂金系列30CM 红色手掌纹金扣
                </p>
                <span>价格 ￥2850 RMB</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/img18.png" class="img-responsive">
                <p>
                    korralaa铂金系列30CM 红色手掌纹金扣
                </p>
                <span>价格 ￥2850 RMB</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/img17.png" class="img-responsive">
                <p>
                    korralaa铂金系列30CM 红色手掌纹金扣
                </p>
                <span>价格 ￥2850 RMB</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/img18.png" class="img-responsive">
                <p>
                    korralaa铂金系列30CM 红色手掌纹金扣
                </p>
                <span>价格 ￥2850 RMB</span>
            </a>
        </li>
    </ul>
    <section class="mt15">
        <a href="#"><img src="images/ad2.png" class="img-responsive"></a>
    </section>
    <section class="clearfix mt20">
        <ul class="pagelist fr clearfix">
            <li><span>1</span></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="num2"><a href="#">100</a></li>
            <li class="last"><a href="#">最有一页</a></li>
        </ul>
    </section>
</section>
<!--/main-->
<!--footer-->
<footer class="clearfix">
	<section class="container">
        <p>Copyright  2006-2015 KORRALAA  HONGKONG COLA TRADING CO.,LIMITED  All Rights Reserved.</p>
        <p class="mr">
            <a href="http://www.5imoban.net/" target="_blank" style="color:#ccc;">我爱模板网</a><br>
            Freephone: +86 400 800 8000<br>
            HONGKONG COLA TRADING CO.,LIMITED <br>
            Freephone: +86 400 800 8000
        </p>
        <dl>
            <dt>关于蔻拉</dt>
            <dd><a href="#">蔻拉文化</a></dd>
            <dd><a href="#">品牌故事</a></dd>
        </dl>
        <dl>
            <dt>联系我们</dt>
            <dd><a href="#">蔻拉客服</a></dd>
            <dd><a href="#">帮助反馈</a></dd>
            <dd><a href="#">微信公众号</a></dd>
        </dl>
        <dl>
            <dt>产品中心</dt>
            <dd><a href="#">女包系列</a></dd>
        </dl>
    </section>
</footer>
<!--/footer-->
<script>
$(function(){
	$("nav .button").click(function(){
		var num = $(this).data("num");
		if(num == 0){
			$("nav .nav-list").slideDown();
			$(this).data("num",1);
		}else{
			$("nav .nav-list").slideUp();
			$(this).data("num",0);
		}
	})
	$(".sidebar dt").click(function(){
		var wWidth = $(window).width();
		if(wWidth <= 767){
			$(".sidebar section").hide();
		}
		if($(this).next("section:hidden").length == 0){
			$(this).next("section").slideUp();
		}else{
			$(this).next("section").slideDown();
		}
	})

})
</script>
</body>
</html>